@extends('base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <form  class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 300px">
                        <label for="" class="layui-form-label">部门</label>
                        <div class="layui-input-block">
                            @include('common.get_department_by_user_id',['user_id'=>auth()->id()])
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label for="" class="layui-form-label">收款日期</label>
                        <div class="layui-inline" id="test-range">
                            <div class="layui-input-inline" style="width: 100px">
                                <input type="text" name="start_date" id="startDate" class="layui-input" placeholder="开始日期" readonly value="{{date('Y-m-1')}}">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px">
                                <input type="text" name="end_date" id="endDate" class="layui-input" placeholder="结束日期" readonly value="{{date('Y-m-d')}}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="search-user" id="search-user" >搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <table class="layui-table">
                        <thead><tr><th>姓名</th><th>收款</th></tr></thead>
                        <tbody id="tableBox"></tbody>
                    </table>
                </div>
                <div class="layui-col-md9">
                    <div id="userLevel" style="height: 600px"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.extend({
            echarts: 'lib/extend/echarts' ,
            echartsTheme: 'lib/extend/echartsTheme' ,
        }).use(['layer','table','form','echarts','echartsTheme','laydate'],function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var echarts = layui.echarts;
            var echartsTheme = layui.echartsTheme;

            //时间选择
            laydate.render({
                elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器
                //设置开始日期、日期日期的 input 选择器
                ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
            });

            form.on('submit(search-user)',function(data) {
                console.log(data)
                var load = layer.load()
                $.post("{{route('bi.user')}}",data.field,function (res) {
                    layer.close(load)
                    $("#tableBox").html('')
                    var xData = []
                    var yData = []
                    var tr = ""
                    res.data.forEach(function (item,index) {
                        xData.push(item.nickname)
                        yData.push(item.money)
                        tr += '<tr><td>'+item.nickname+'</td><td>'+item.money+'</td></tr>'
                    })
                    $("#tableBox").append(tr)
                    var myechart = echarts.init(document.getElementById('userLevel'), echartsTheme);
                    myechart.setOption({
                        title: {text: "个人收款汇总",padding:[5,0,0,50], subtext: ""},
                        tooltip: {trigger: "axis"},
                        xAxis: {
                            type: 'category',
                            data: xData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: yData,
                            type: 'bar',
                            name: "总收款",
                            markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},
                            markLine: {data: [{type: "average", name: "平均值"}]}
                        }]
                    })
                    window.onresize = myechart.resize;
                })
                return false;
            });
            setTimeout(function () {
                $("#search-user").click()
            },400)

        })
    </script>
@endsection
